<template>
<div 
    @click.stop
    class="select-engine-cp"
    v-show="show">
    <div class="all-container">
        <div class="container">
            <div 
                :class="{
                    'item':true,
                    'active-item':item.id==engine.id,
                }"
                v-for="(item,index) in allEngineList" :key="index"
                @click="onClickItem(item)"
                @contextmenu.prevent="onRightClick(item)">
                <el-image
                    class="border-radius_1"
                    :src="item.icon"
                    fit="cover">
                    <div slot="error">
                    </div>
                </el-image>
                {{item.name}}
            </div>
        </div>
    </div>
    <div 
        class="loading"
        :style="{
            transform:loading?'scale(1)':'scale(0)',
        }">
        <i class="el-icon-loading"></i>
    </div>
    <span class="help border-radius_1 box-shadow_1">
        直接右键可以进行搜索，添加的网址有搜索引擎的话也是如此。
    </span>
</div>
</template>

<script>
/*
 选择搜索引擎组件
 */
import {throttleFn} from '@/common/DebounceAndThrottle'; //节流
export default {
    name: 'SelectEngine',
    props:{
        keyWord:{  //需要搜索的值
            type:String,
            default:'',
        },
        engine:{  //搜索引擎
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    data(){
        return {
            loading:false,
        };
    },
    computed:{
        userWebsiteList(){  //全局用户所有的网站
            return this.$store.state.user.userWebsiteList;
        },
        allEngineList(){  //所有的搜索引擎（包括用户自定义添加的）
            let definedEngineList = this.userWebsiteList.filter(item=>{
                return !!item.website.search && item.website.defined;
            });
            definedEngineList = definedEngineList.map(item=>{
                return {
                    ...item.website,
                };
            });
            return [].concat(this.engineList,definedEngineList);
        },
        engineList:{  //全局的搜索引擎列表(有缓存)
            set(newValue){
                this.$store.commit('public/setEngineList',newValue);
            },
            get(){
                return this.$store.state.public.engineList;
            },
        },
    },
    methods:{
        getData:throttleFn(function(){ //获取所有搜索引擎(可外部调用)
            this.loading = true;
            this.$Api.getEngines()
                .then((data)=>{
                    this.engineList = data;
                }).finally(()=>{
                    this.loading = false;
                });
        },700),
        onClickItem(engine){ //选择搜索引擎
            this.engine = engine;
            this.$emit('onChange',engine);  //选择后通知父组件
        },
        onRightClick(website){  //item右击事件
            let search = website.search;
            let url = search.replace("{searchData}",encodeURI(this.keyWord));
            window.open(url);
        },
    },
}
</script>
<style lang="scss" scoped>
@media only screen and (min-width: 1920px){
    .select-engine-cp{
        >.all-container{
            >.container{
                max-height: 15rem;
                >.item{
                    font-size: 1.8rem;
                    padding: 1.2rem;
                    border-radius: 0.15rem;
                    /deep/.el-image{
                        width: 2.7rem;
                        height: 2.7rem;
                        margin-right: 0.5rem;
                        img{
                            width: 2.7rem;
                            height: 2.7rem;
                        }
                    }
                }
            }
        }
        >.loading{
            padding: 1rem 0;
            font-size: 2rem;
        }
    }
}
@media only screen and (max-width: 1920px){
    .select-engine-cp{
        >.all-container{
            >.container{
                max-height: 140px;
                >.item{
                    font-size: 16px;
                    padding: 10px;
                    border-radius: 1.5px;
                    /deep/.el-image{
                        width: 20px;
                        height: 20px;
                        margin-right: 5px;
                        img{
                            width: 20px;
                            height: 20px;
                        }
                    }
                }
            }
        }
        >.loading{
            padding: 5px 0;
            font-size: 15px;
        }
    }
}
.select-engine-cp{
    width: 100%;
    height: fit-content;
    z-index: 999;
    transition: all 0.2s;
    position: relative;
    >.all-container{  //两层，防止滚动条超出
        height: fit-content;
        width: 100%;
        background-color: rgb(255, 255, 255);
        border-radius: 7px;
        overflow: hidden;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.211),0 1px 5px 0 rgba(0, 0, 0, 0.272);
        border: 1px solid #eff1f4;
        box-sizing: border-box;
        >.container{
            box-sizing: border-box;
            flex-wrap: wrap;
            display: flex;
            overflow-y: auto;
            >.item{
                display: flex;
                align-items: center;
                transition: all 0.2s;
                box-sizing: border-box;
                cursor: pointer;
                &:hover{
                    background-color: rgba(46, 50, 56, 0.129);
                }
            }
            >.active-item{
                background-color: rgba(46, 50, 56, 0.129);
            }
        }
    }
    >.loading{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.2s;
        position: absolute;
        bottom: 0;
    }
    >.help{
        position: absolute;
        bottom: calc(-3rem - 6px);
        right: 0;
        opacity: 0;
        font-size: 1.5rem;
        pointer-events: none;
        transition: all 0.2s;
        padding: 3px 5px;
    }
    &:hover{
        >.help{
            background-color: rgba(0, 0, 0, 0.442);
            color: white;
            opacity: 1;
        }
    }
}
</style>

